<template>
  <div>
    <div class="component component--layout layout--D3" v-if="props.movementData.length > 0">
      <header class="header header--secondary">
        <h2 class="title">
          <a class="link" href="">The Big Move</a>
        </h2>

        <p class="paragraph">Your real estate questions answered</p>
      </header>
      <!-- Hotheadlines.vue   441行 movement -->
      <div class="column column--primary">
        <div class="element element--article" v-for="(item, index) in props.movementData" :key="index">
          <figure class="article__figure" >
            <a @click="pushDetail(item)">
              <img class="lazyautosizes" :src="item.imgUrl" v-if="item.imgUrl" />
              <img v-else src="../../../assets/detail-noImg.png" alt="">
            </a>
              
            <!-- <router-link class="figure__image"
              :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
              <img class="lazyautosizes" :src="item.imgUrl" v-if="item.imgUrl" />
              <img v-else src="../../../assets/detail-noImg.png" alt="">
            </router-link> -->
          </figure>
          <div class="article__content">
            <h3 class="article__headline" @click="pushDetail(item)">
                {{ item.title }}
              <!-- <router-link class="link" :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                {{ item.title }}
              </router-link> -->
            </h3>
          </div>
        </div>
      </div>
      <div class="column column--aside">
        <!-- Hotheadlines.vue   472行 movement -->
        <div class="element element--article" v-for="(item, index) in props.movementData1" :key="index">
          <figure class="article__figure">

             <a @click="pushDetail(item)">
              <img class="lazyload" :src="item.imgUrl" v-if="item.imgUrl" />
              <img src="../../../assets/noimg.png" alt="" v-else>
             </a>
              


            <!-- <router-link class="figure__image"
              :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
              <img class="lazyload" :src="item.imgUrl" v-if="item.imgUrl" />
              <img src="../../../assets/noImage.png" alt="" v-else>
            </router-link> -->
          </figure>
          <div class="article__content">
            <h3 class="article__headline">
              <a @click="pushDetail(item)">{{ item.title }}</a>

              <!-- <router-link class="link" :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                {{ item.title }}
              </router-link> -->
            </h3>
          </div>
        </div>
        <div class="group group--articles">
          <!-- Hotheadlines.vue   500行 movement2 -->
          <div class="element element--article" v-for="(item, index) in props.movementData2" :key="index">
            <div class="article__content">
              <h3 class="article__headline">
                <!-- <router-link class="link" :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                  {{ item.title }}
                </router-link> -->
                <a @click="pushDetail(item)">{{ item.title }}</a>
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="component component--layout layout--D1" v-if="props.spendingData.length > 0">
      <header class="header header--secondary">
        <h2 class="title">
          <a class="link" href="">Spending &amp; Saving</a>
        </h2>

        <p class="paragraph">News and advice on managing your money.</p>
      </header>

      <div class="column column--full">
        <div class="element element--article is-lead MarketWatchcom">
          <div class="article__content">
            <h3 class="article__headline">
              <a class="link" href="">
                You can pay off debt in many ways. Here’s how to find what’s
                right for you.
              </a>
            </h3>
          </div>
        </div>
      </div>
      <div class="column column--primary">
        <!-- regionFull.vue   550行 SPENDING -->
        <div class="element element--article is-lead MarketWatchcom" v-for="(item, index) in props.spendingData"
          :key="index">
          <figure class="article__figure">
            <div class="figure__image" @click="pushDetail(item)"
            >
              <img class="lazyload" :src="item.imgUrl" v-if="item.imgUrl" />
              <img src="../../../assets/noimg.png" alt="" v-else>
          </div>
          </figure>
          <div class="article__content">
            <h3 class="article__headline">
              <div class="link" @click="pushDetail(item)">
                {{ item.title }}
              </div>
            </h3>
          </div>
        </div>
      </div>
      <div class="column column--aside">
        <!-- regionFull.vue   579行 SPENDING -->
        <div class="element element--article MarketWatchcom" v-for="(item, index) in props.spendingData1" :key="index">
          <figure class="article__figure">
            <div class="figure__image" @click="pushDetail(item)"
              >
              <img class="lazyload" :src="item.imgUrl" v-if="item.imgUrl" />
              <img src="../../../assets/noimg.png" alt="" v-else>
          </div>
          </figure>
          <div class="article__content">
            <h3 class="article__headline">
              <div class="link" @click="pushDetail(item)">
                {{ item.title }}
              </div>
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps([
  "movementData",
  "movementData1",
  "movementData2",
  "spendingData",
  "spendingData1",
]);
const pushDetail = (data) => {
    router.push({ name: 'stockDetail', params: { symbol: data.symbol } })
}
</script>
<style lang="scss" scoped></style>
